<template>
  <div class="onlyoffice-wrapper">
    <div id="onlyoffice-container"></div>
  </div>
</template>

<script>
export default {
  name: "OnlyOfficeTemplate",
  props: {
    // 接收父组件传递的文档类型
    docType: {
      type: Object,
      required: true,
      default: () => ({
        templateName: "未命名模板",
      }),
    },
  },
  data() {
    return {
      docEditor: null, // 编辑器实例
    };
  },
  mounted() {
    this.initEditor();

    // setTimeout(() => {
    //   if (this.docEditor) {
    //     console.log("强制触发保存");
    //     this.docEditor.executeCommand("save"); // 调用OnlyOffice的保存命令
    //   }
    // }, 30000);
  },
  beforeDestroy() {
    // 先判断实例是否存在，且有destroy方法
    if (this.docEditor && typeof this.docEditor.destroy === "function") {
      try {
        this.docEditor.destroy();
      } catch (error) {
        console.error("销毁OnlyOffice编辑器失败:", error);
      }
      this.docEditor = null;
    }
  },
  methods: {
    initEditor() {
      const apiUrl = `http://192.168.1.8:9079/web-apps/apps/api/documents/api.js`;

      // 检查是否已加载API
      if (window.DocsAPI) {
        this.createEditor();
        return;
      }

      // 动态加载OnlyOffice API
      const script = document.createElement("script");
      script.src = apiUrl;

      script.onload = () => {
        console.log("OnlyOffice API加载成功");
        this.createEditor();
      };
      script.onerror = (error) => {
        console.error("API加载失败，路径是否正确？", apiUrl, error);
        this.$message.error("编辑器API加载失败，请检查端口和路径");
      };
      document.head.appendChild(script);
    },
    createEditor() {
      // 添加类型映射
      const typeMap = {
        text: "word",
        spreadsheet: "cell",
        presentation: "slide",
      };

      // 根据文件类型映射到正确的编辑器目录
      const editorDirMap = {
        docx: "documenteditor",
        xlsx: "spreadsheeteditor",
        pptx: "presentationeditor",
      };

      if (!this.docType) {
        this.$message.error("文档类型信息缺失");
        return;
      }

      // 确保docType存在再访问其属性
      if (!this.docType) {
        console.error("docType is undefined");
        this.$message.error("文档类型信息缺失");
        return;
      }

      // 区分「新建」和「编辑」模式
      const isEdit = this.docType.isEdit === true; // 从父组件接收的标记
      const templateName =
        this.docType.templateName || this.docType.name || "未命名模板";
      const safeTemplateName = templateName.replace(/_/g, "-");

      let documentUrl;
      if (isEdit) {
        // 编辑模式：使用 MinIO 中的实际文件 URL
        documentUrl = this.docType.filePath; // 父组件传递的实际 URL
        console.log("编辑模式 - 文件URL:", documentUrl);
        if (!documentUrl) {
          this.$message.error("未找到文件地址，无法编辑");
          return;
        }
      } else {
        // 新建模式：使用空白模板 URL
        const editorDir =
          editorDirMap[this.docType.fileType] || "documenteditor";
        documentUrl = `http://192.168.1.8:9079/web-apps/apps/${editorDir}/blank.${this.docType.fileType}`;
      }

      // 生成唯一key
      const docKey = isEdit
        ? `edit_${this.docType.templateId}_${Date.now()}` // 编辑：包含模板 ID
        : `new_${Date.now()}_${safeTemplateName}`;

      try {
        this.docEditor = new DocsAPI.DocEditor("onlyoffice-container", {
          // 文档配置
          document: {
            fileType: this.docType.fileType,
            key: docKey,
            title: this.docType.templateName,
            url: documentUrl,
            permissions: { edit: true },
          },
          // 编辑器配置
          documentType: typeMap[this.docType.documentType] || "word",

          editorConfig: {
            mode: "edit",
            lang: "zh-CN",
            user: {
              id: this.$store.state.user.id,
              name: this.$store.state.user.name,
            },
            callbackUrl: "http://192.168.1.8:8289/api/template/callback",
            customization: {
              forcesave: true,
              about: false, // 隐藏关于按钮
              feedback: false, // 隐藏反馈按钮
              compactHeader: true, // 紧凑头部
            },
          },

          saveDocument() {
            // 保存逻辑...
            // 保存成功后触发事件
            this.$emit("saveSuccess");
          },

          // 事件处理（增强版）
          events: {
            onReady: () => console.log("OnlyOffice编辑器已准备就绪"),
            onError: (event) => {
              console.error("编辑器错误详情:", event.data);
              this.$message.error(`初始化失败: ${event.data.errorDescription}`);
            },
            onStateChange: (event) => {
              console.log("文档状态变化:", event.data);
            },
            onSave: (event) => {
              console.log("OnlyOffice 触发保存事件", event);
              // 主动调用保存API（确保后端回调执行完成）
              this.docEditor.executeCommand("save");
              // 延迟触发刷新（给后端处理时间）
              setTimeout(() => {
                this.$emit("saveSuccess"); // 确保事件触发
              }, 1000); // 延迟1秒，等待后端处理完成
            },
            // 监听文档状态变化，确保保存完成
            onDocumentStateChange: (event) => {
              if (event.data === 2) {
                // 2表示文档已修改并可保存
                console.log("文档状态：可保存");
              }
            },
            onRequestEditRights: () => {
              console.log("请求编辑权限");
            },
            onDocumentReady: () => {
              console.log("文档已加载完成");
            },
            onFileReady: () => {
              console.log("文件已准备好");
            },
          },
        });

        console.log("生成的documentUrl:", documentUrl); // 添加日志，便于调试
        console.log("父组件传入:", this.docType);
        console.log("映射后:", {
          documentType: typeMap[this.docType.documentType] || "word",
          fileType: this.docType.fileType,
        });
      } catch (error) {
        console.error("初始化OnlyOffice编辑器失败:", error);
        this.$message.error("初始化编辑器失败，请检查配置");
      }
    },
  },
};
</script>

<style scoped>
.onlyoffice-wrapper {
  width: 100%;
  height: 100%;
}

#onlyoffice-container {
  width: 100%;
  height: 100%;
  /* min-height: 900px; */
}
</style>
